<template>
	<div class="order-evalution">
		<p class="evalText">——— 发布评价 ———</p>
		<mt-field placeholder="请填写您的评价" type="textarea" rows="4" maxlength="10"></mt-field>
		<!--<span class="un">还可以输入<font id="xxxx">25</font>个字，不支持恶意html语法</span>-->
		<div class="store-eval">
			<p><i class="iconfont icon-dianpu"></i>店铺评分</p>
			<div class="evalInfo">
				<p class="serverType">服务态度</p>
				<p class="star">
					<input type="radio" name="b" value="0" v-model="inputdata" />
					<span>★</span>

					<input type="radio" name="b" value="1" v-model="inputdata" />
					<span>★</span>

					<input type="radio" name="b" value="2" v-model="inputdata" />
					<span>★</span>

					<input type="radio" name="b" value="3" v-model="inputdata" />
					<span>★</span>

					<input type="radio" name="b" value="4" v-model="inputdata" />
					<span>★</span>

					<input type="radio" name="b" value="5" v-model="inputdata" />
					<span>★</span>
				</p>
			</div>
		</div>
		<button class="submit">提 交</button>
	</div>
</template>

<script>
	export default {
		name: 'order-evalution',
		data() {
			return {
				inputdata: '0'
			}
		},
		methods: {},
		watch: {
			inputdata(value) {
				console.log(value)
			}
		}
	}
</script>

<style lang="less">
	.order-evalution {
		background-color: #f5f5f5;
		height: 100%;
		.evalText {
			text-align: center;
			color: #999;
			font-size: .3rem;
			line-height: 1rem;
		}
		.store-eval {
			background-color: #fff;
			margin-top: .2rem;
			padding: .24rem;
			.icon-dianpu {
				vertical-align: middle;
				padding-right: .1rem;
				font-size: .45rem;
			}
			.evalInfo {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 .5rem;
				.serverType {}
				.star>input {
					opacity: 0;
					position: absolute;
					width: 2em;
					height: 2em;
					margin: 0;
				}
				.star>input:nth-of-type(1),
				.star>span:nth-of-type(1) {
					display: none;
				}
				.star>span {
					font-size: 2em;
					color: gold;
					-webkit-transition: color .2s;
					transition: color .2s;
				}
				.star>input:checked~span {
					color: #666;
				}
				.star>input:checked+span {
					color: gold;
				}
			}
		}
		button {
			display: block;
			background-color: #e4393c;
			border-radius: .5rem;
			text-align: center;
			margin: 0 auto;
			margin-top: .5rem;
			border: none;
			color: #fff;
			letter-spacing: .1rem;
			width: 88%;
			padding: 0.16rem 0;
			margin-top: 1rem;
		}
	}
</style>